<template>
	<view>
		<!-- 弹窗 -->
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"><text
					class="text">popup 内容</text></view>
		</uni-popup>
		<!-- 头像部分 -->
		<view class="photoTou">
			<img src="	https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/u4901.png" alt="">
			<view>
				<p>用户名:{{username}}</p>
				<span>用户id:{{userid}}</span>
			</view>
		</view>
		<view class="banner">
			<!-- 优惠券 -->
			<view class="youhuijuan">
				<view>
					<icon :type="iconType" size="26" />
					<p>优惠券：<span>({{youhuijuanNum}})</span></p>
				</view>
				<view class="rigthArrow">
					>
				</view>
			</view>
			<!-- 首付款 -->
			<view class="goodscar">
				<ul>
					<li class='banner-item'>
						<navigator class="banner-item" url="/pages/team/team">
							<img src="https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/u4911.svg
" alt="">
							<p>待付款</p>
						</navigator>
					</li>
					<li class='swiper'>
						<navigator class="banner-item" url="/pages/team/team">
							<img src="https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/u4924.svg
					" alt="">
							<p>待提货</p>
							<div>

							</div>
						</navigator>
					</li>
					<li>
						<navigator class="banner-item" url="/pages/team/team">
							<img src="https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/u4914.svg
										" alt="">
							<p>待评价</p>
						</navigator>
					</li>
					<li>
						<navigator class="banner-item" url="/pages/team/team">
							<img src="https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/u4917.svg
															" alt="">
							<p>退款/售后</p>
						</navigator>
					</li>
					<li>
						<navigator class="banner-item" url="/pages/team/team">
							<img src="	https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/u4920.svg
																			" alt="">
							<p>全部订单</p>
						</navigator>
					</li>
				</ul>

			</view>
			<!-- 轮播 -->
			<view class="banner-item">
				<Swiper></Swiper>
			</view>
			<!-- 自提点定位 -->
			<view class="banner-item1">
				<view class="">
					<p>当前自提点</p>
					<p><span>切换</span>></p>
				</view>
				<view class="Mapaddress">
					<view class="">
						<p>万达广场附近</p>
						<span>具體地面</span>
					</view>
					<view class="Daohang">
						<img src="	https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/u4962.svg
" alt=""><span>导航</span>
					</view>
				</view>
				<view class="Shouhou">
					<img src="	https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/u4965.svg
				" alt="">
					<p>商品有任何问题，请联系团长，让您售后无忧</p>
				</view>
			</view>
			<!-- AD广告 -->
			<view class="AD">
				AD
			</view>
			<!-- 活动衷心 -->
			<view class="Ports">
				<p>活动中心</p>
				<ul>
					<li><img src="	https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/u4993.svg
" alt="">
						<p>推荐有奖</p>
					</li>
					<li><img src="		https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/u4994.svg

" alt="">
						<p>天天领红包</p>
					</li>
				</ul>
			</view>
			<!-- 我的服务 -->
			<view class="MyServe ">
				<p>我的服务</p>
				<ul>
					<navigator class="banner-item" url="/pages/team/team">
						<li @click="toggle('center')"><img src="		https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/u4973.svg
				
				" alt="">
							<p>提货码</p>
						</li>
					</navigator>
					<navigator class="" url="/pages/team/team">
						<li>
							<img src="	https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/u4976.svg"
								alt="">
							<p>成为团长</p>
						</li>
					</navigator>
					<navigator class="banner-item" url="/pages/team/team">
						<li>
							<img src="	https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/u4979.svg
" alt="">
							<p>联系客服</p>
						</li>
					</navigator>
					<navigator class="banner-item" url="/pages/mine/Suggetstion/Suggestion">
						<li>
							<img src="		https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/u4982.svg
" alt="">
							<p>投诉/建议</p>
						</li>
					</navigator>
					<navigator class="banner-item" url="/pages/mine/System/System">
						<li>
							<img src="		https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/u4985.svg"
								alt="">
							<p>设置</p>
						</li>
					</navigator>
				</ul>
			</view>
			<!-- 底部内容 -->
			<view class="Bottom-content">
				<view class="">
					<img src="	 https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/%E5%BD%A2%E7%8A%B6%E7%BB%93%E5%90%88_u4999.svg
" alt="">
					<img src="../../static/icon/bg.png" alt="">
				</view>
				<ul>
					<li>
						<img src="https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/u5007.svg
" alt="">
						<p>平台报价</p>
					</li>
					<li>
						<img src="https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/u5008.svg
					" alt="">
						<p>48小时质量无忧</p>
					</li>
					<li>
						<img src="https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/u5010.svg
										" alt="">
						<p>急速退款</p>
					</li>
				</ul>
			</view>
		</view>

	</view>
</template>
<script>
	import Swiper from '../../components/swper/swper.vue'
	export default {
		components: {
			Swiper
		},
		data() {
		
			return {
				userid: '123',
				username: "问我",
				iconType: "info",
				youhuijuanNum: "3",
				value: '',
				type: 'center',
			}
			
			methods: { 
				
				// toggle(type) {
				// 	this.type = type
				// 	// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				// 	this.$refs.popup.open(type)
				// }
				// shareToggle() {
				// 	this.$refs.share.open()
				// }
				// change(e) {
				// 	console.log('当前模式：' + e.type + ',状态：' + e.show)
				// }
			}
		
		},}
</script>

<style scoped lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	.photoTou {
		display: flex;
		margin: 20px 2px;

		>img {
			height: 50px;
			width: 50px;
			padding-right: 20px;
		}

		p {
			font-weight: 200;
			font-style: normal;
			font-size: 16px;
			margin-top: 10px;
		}

		span {
			font-weight: 200;
			font-style: normal;
			font-size: 12px;
			color: #7F7F7F;
		}
	}

	.banner {
		background-color: rgba(247, 247, 247, 1);
		padding: 10px;

		>.youhuijuan {
			// margin-top: 5px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 35px;
			background: inherit;
			background-color: rgba(255, 255, 255, 1);
			border: none;
			border-radius: 4px;

			>view {
				display: flex;
				align-items: center;

				>p {
					font-size: 12px;
				}
			}

			icon {
				padding-left: 10px;
				padding-right: 10px;
			}

			.rigthArrow {
				padding-right: 10px;

			}
		}
	}

	.goodscar {
		height: 88px;
		padding: 10px 0;

		>ul {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 88px;
			background-color: rgba(255, 255, 255, 1);
			border: none;
			border-radius: 4px;
			list-style: none;

			>li {
				// width: calc(100%/5);
				text-align: center;
				margin: 0 5px;

				p {
					margin: 5px 0;
				}
			}

			>.banner-item {
				// margin-left: -20px;
				margin-right: 5px;
			}

		}
	}


	.swiper {
		position: relative;

		div {
			left: 15px;
			top: 53px;
			position: absolute;
			width: 0;
			height: 0;

			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-bottom: 20px solid rgba(247, 247, 247, 1);
		}
	}

	.banner-item1 {

		padding: 10px;
		background-image: url('https://cdn3.axureshop.com/demo/1992135/images/%E6%88%91%E7%9A%84/u4953.png');
		margin-top: 20px;
		color: #333333;

		>view:first-child {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: inherit;
			background-color: rgba(255, 255, 255, 0);
			// height: 55px;
		}
	}

	.Mapaddress {
		background-color: rgba(255, 255, 255, 0);
		display: flex;
		justify-content: space-between;
		margin-top: 10px;

		>.Daohang {
			cursor: pointer;
		}
	}

	.Shouhou {
		margin-left: 10px;
		display: flex;
		margin-top: 10px;
		background-color: rgba(255, 255, 255, 0);

		>p {
			margin-left: 10px;
			font-size: 12px;
			color: #FF8A8A;
			line-height: 24px;
		}
	}

	.AD {
		height: 75px;
		background: inherit;
		background-color: rgba(255, 255, 255, 1);
		border: none;
		border-radius: 4px;
		text-align: center;
		line-height: 75px;
		margin: 10px 0;
	}

	.Ports {
		height: 131px;
		background: inherit;
		background-color: rgba(255, 255, 255, 1);
		border: none;
		border-radius: 4px;

		>p {
			padding: 5px;
		}

		>ul {
			list-style: none;
			display: flex;
			text-align: center;
			margin: 10px 0;

			>li {
				margin: 0 10px;

				>p {
					margin: 5px 0;
				}
			}
		}
	}


	.MyServe {
		margin: 10px 0;
		height: 185px;
		background: inherit;
		background-color: rgba(255, 255, 255, 1);
		border: none;
		border-radius: 4px;

		>p {
			padding: 20px 5px;
		}

		>ul {
			display: flex;
			justify-content: space-around;
			list-style: none;
			text-align: center;
			margin: 20px 0;


			>li {
				margin: 0 2px;
				font-weight: 200;
				font-style: normal;
				font-size: 14px;
			}
		}
	}

	.Bottom-content {
		margin-bottom: 20px;
		height: 77px;
		background: inherit;
		background-color: rgba(255, 255, 255, 0);
		border: none;
		border-radius: 0px;

		>view {
			height: 30px;
			// display: flex;
			text-align: center;

		}

		>ul {
			margin: 20px 0;
			justify-content: center;
			display: flex;
			list-style: none;
			text-align: center;

			>li {
				margin: 0 10px;
			}

			p {
				font-size: 12px;
				color: #C2C7D0;
			}
		}
	}
</style>
